Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
Home
About
Contact
Store
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } body { height: 100vh; max-width: 100%; overflow: clip; margin: 0; display: grid; place-items: center; } .container { position: relative; } nav { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; a { text-decoration: none; display: flex; gap: 0.4rem; align-items: center; color: #455a64; padding: 0.5rem 1rem; svg { pointer-events: none; width: 1.2em; fill: currentColor; } &:hover, &:focus { color: #1e88e5; } } } #duplicate-nav { position: absolute; inset: 0; background: #1e88e5; pointer-events: none; clip-path: inset(0 77% 0 0% round 1rem); transition: clip-path 0.2s; a { color: white; } }
console.log("Event Fired") const nav = document.querySelector("#nav"); // duplicate and insert const duplicate = nav.cloneNode(true); // make sure it has a unique ID duplicate.id = "duplicate-nav"; // Hide the duplicate from screen reader users duplicate.setAttribute("aria-hidden", true); nav.parentNode.insertBefore(duplicate, nav.nextSibling); nav.addEventListener("click", (e) => { // target is reliable as the SVG icons have `pointer-events: none` const link = e.target; // the magic math for figuring out the new clip path. const { offsetLeft, offsetWidth } = link; const clipLeft = offsetLeft; const clipRight = offsetLeft + offsetWidth; duplicate.style.clipPath = `inset(0 ${Number( 100 - (clipRight / duplicate.offsetWidth) * 100 ).toFixed()}% 0 ${Number( (clipLeft / duplicate.offsetWidth) * 100 ).toFixed()}% round 1rem)`; });